<!--vue模板-->
<template>

    <!--添加按钮-->
    <el-button type="primary" style="margin-bottom: 10px;" @click="saveOrUpdate()">添加</el-button>
 
   <!--表格数据 -->
   <el-table :data="tableData" style="width: 100%" stripe border>
    <el-table-column
       type="selection"
       width="60"
       header-align="center"
       align="center"
     />
     <el-table-column
       type="index"
       label="序号"
       width="80"
       header-align="center"
       align="center"
     />
     <el-table-column  label="采购申请编号" header-align="center"  width="180">
         <template v-slot="{row}">
          <router-link :to="'/purchaseDetail/'+row.id">{{row.code}}</router-link>
         </template>
     </el-table-column>
     <el-table-column
       label="采购申请主题"
       header-align="center"
       align="center"
     >
     <template v-slot="{row}">
          <router-link :to="'/purchaseDetail/'+row.id">{{row.subject}}</router-link>
         </template>
     </el-table-column>
     <el-table-column
       prop="category"
       label="采购申请类别"
       width="180"
       header-align="center"
       align="center"
     />

     <el-table-column
       prop="money"
       label="总金额"
       width="120"
       header-align="center"
       align="center"
     />

     <el-table-column
       label="询价状态"
       width="100"
       header-align="center"
       align="center"
     >
      <template v-slot="{row}">
          <el-tag v-if="row.enquiryStatus==0">无需询价</el-tag>
          <el-tag v-else-if="row.enquiryStatus==1">待询价</el-tag>
          <el-tag v-else-if="row.enquiryStatus==2">询价中</el-tag>
          <el-tag v-else>询价完成</el-tag>
      </template>
     </el-table-column>
     <el-table-column
       label="采购状态"
       width="100"
       header-align="center"
       align="center"
     />

     <el-table-column
       prop="makeDate"
       label="制单日期"
       width="120"
       header-align="center"
       align="center"
     />

     
     <el-table-column
       prop="makeUser"
       label="制单人员"
       width="120"
       header-align="center"
       align="center"
     />


   
     <el-table-column label="操作" width="180" header-align="center" align="center">
       <template v-slot="{ row }">
         <el-button type="primary" 
         >询价</el-button>
       </template>
     </el-table-column>
   </el-table>
   <!--分页-->
   <el-pagination
     @current-change="pagechange"
     @size-change="chgsize"
     @update:page-size="pageSize"
     class="page"
     background
     layout="total,sizes, prev, pager, next,jumper"
     :total="total"
     :page-size="pageSize"
     :page-sizes="[10, 20, 50, 100]"
   />
 
 </template>
 
 <!--vue 组件选项定义-->
 <script>
 export default {
   data() {
     return {
       tableData: [],
       page: 1, //默认显示第一页数据
       pageSize: 10, //默认一页显示的记录数
       total: 0, //默认总记录数
       isShowDialog:false,//是否显示保存对话框 
     };
   },
   //注册组件 
   components:{
   },
   methods: {
     initData() {
       let data = {
         page: this.page,
         pageSize: this.pageSize,
       };
       this.$http.post("/api/purchase/query", data).then((res) => {
         //判断接口数据是否正常
         if (res.code == 200) {
           this.tableData = res.result.data;
           this.page = res.result.page;
           this.pageSize = res.result.pageSize;
           this.total = res.result.total;
         }
       });
     },
 
    //修改用户
     saveOrUpdate(row){
         this.$router.push({path:"/savePurchase"});
     },
     //删除方法 
     del(id){console.log(">>>",this.$message);
       this.$confirm("你确定要删除吗?","提示")
       .then(res=>{
          this.todel(id); 
       })
       .catch(err=>{
      
       })
 
     },
     todel(id){
         this.$http.delete("/api/user/delete",{id})
         .then(res=>{
             if(res.code==200){
               this.$message.success("删除成功");
               //重新加载数据 
               this.initData();
             }
         })
     },
 
     //页数改变
     pagechange(page) {
       this.page = page;
       this.initData();
     },
 
     //每页条数改变
     chgsize(pgsize) {
       //当每页记录数变化时，总页数跟着改变
       this.page = 1; //必须从第1页开始查
       this.pageSize = pgsize;
       this.initData();
     },
   },
   created() {
     this.initData();
   },
 };
 </script>
 
 <!--vue样式 scoped当前样式只适用于当前组件-->
 <style scoped>
 .page {
   float: right;
   margin-top: 20px;
   margin-right: 20px;
 }
 
 .label {
   margin-left: 20px;
   margin-right: 20px;
   color: #666;
   font-weight: bold;
 }
 
 .el-row {
   margin: 15px 0;
 }
 
 .el-row .el-col-12 div span {
   color: #666;
   font-weight: bold;
   margin: 0 20px;
 }
 
 .el-row .el-col-24 div span {
   color: #666;
   font-weight: bold;
   margin: 10px 20px;
 }

 a{
  text-decoration: none;
  color: #4a82e4;
 }
 </style>
 